<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import { loginout } from "@/api/data";

// // 在页面关闭和刷新时调用
window.addEventListener("beforeunload", async function () {
  // 自己下线或者刷新，通知所有人更新socketid
  let userdata = JSON.parse(localStorage.getItem("userdata")) || null;
  if (userdata != null) {
    let data = await loginout({ _id: userdata._id });
    if (data.code == 200) {
      // 跟新成功
    }
  }
});

export default {
  mounted() {
    // 初始化vuex中的上线和下线好友信息,新消息
    this.$store.commit("removeolduserdata");
    this.$store.commit("removenewuserdata");
    this.$store.commit("removenewmessage");

    // 监听好友上线
    this.$socket.on("getuserslist", (data) => {
      if (
        data.code == 200 &&
        this.$store.state.userdata &&
        this.$store.state.userdata._id != data.data._id
      ) {
        // 有用户上线就将用户的下线消息清空
        this.$store.commit("removeolduserdata");
        // 将这个新用户的信息保存到vuex
        data.data.isOnline = true;
        this.$store.commit("setnewuserdata", data.data);
      }
    });

    // 监听好友下线
    this.$socket.on("olduserloginout", (data) => {
      if (
        data.code == 200 &&
        this.$store.state.userdata &&
        this.$store.state.userdata._id != data.data._id
      ) {
        // 有用户下线就将用户的上线消息清空
        this.$store.commit("removenewuserdata");
        // 将这个旧用户的信息保存到vuex
        data.data.isOnline = false;
        this.$store.commit("setolduserdata", data.data);
      }
    });

    // 监听自己是否被强行下线
    this.$socket.on("loginouted", (data) => {
      if (data.code == 200) {
        // 先要清空登陆信息
        sessionStorage.clear();
        localStorage.removeItem("userdata");
        this.$store.commit("removeuserdata");
        alert(data.msg);

        this.$router.replace("/login");
      }
    });

    // 监听是否有人发消息,这个只有当前用户在线才会触发
    this.$socket.on("getmsg", (data) => {
      if (data.code == 200) {
        // console.log(data.msg)
        // 当前消息存到vuex,如果正和当前对象聊天，可以直接在消息详情页面动态获取
        this.$store.commit("setnewmessage", data.msg);
      }
    });
  },

};
</script>

<style lang="less">
canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>
